.steps-bar {
  display: flex;
  flex-wrap: wrap;

  .step {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: calc(100% / 3);
    margin-top: 26rpx;

    .cur-idx {
      width: 25rpx;
      height: 25rpx;
      line-height: 25rpx;
      border-radius: 50%;
      border: 1px solid @color-border-grey;
      font-family: 'ali-p';
      font-size: 20rpx;
      color: @color-light-grey-text;
      text-align: center;
    }

    .cur-text {
      font-family: 'ali-p';
      font-weight: 500;
      font-size: 23rpx;
      color: @color-light-grey-text;
      margin-left: 6rpx;
    }

    .line {
      width: 50%;
      height: 1rpx;
      background-color: @color-grey;
      margin-left: 10rpx;
    }
  }

  //.step:nth-child(3n) {
  //  width: 20%;
  //}
  .is-active {
    .cur-idx {
      border: 1px solid @color-green;
      color: @color-green-text;
    }
    .cur-text {
      color: @color-green-text;
    }
    .line {
      background-color: @color-green;
    }
  }

  .is-error {
    .cur-idx {
      border: 1px solid @color-red;
      color: @color-red-text;
    }
    .cur-text {
      color: @color-red-text;
    }
    .line {
      background-color: @color-red;
    }
  }
}
